var canvas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
//获取工具按钮的标签
var Pen=document.getElementById('means_pen');
	//获取画笔标签
var Temp1=document.getElementById('means_temp1');
//获取画笔标签
var Brush=document.getElementById('means_brush');
	//获取橡皮标签
var Eraser=document.getElementById('means_eraser');
	//获取油漆桶标签
var Paint=document.getElementById('means_paint');
	//获取吸管标签
var Straw=document.getElementById('means_straw');
	//获取文本标签
var Text=document.getElementById('means_text');
	//获取放大镜标签
var Magnifier=document.getElementById('means_magnifier');
//缩小
var Suoxiao=document.getElementById('means_drawSuoxiao');

//获取形状按钮的标签
	//获取画线标签
var Line=document.getElementById('shape_line');
	//获取画圆圈的标签
var Arc=document.getElementById('shape_arc');
	//获取画六边形的标签
var hexagon=document.getElementById('shape_hexagon');
//获取画五角星的标签
var star=document.getElementById('shape_star');

//把14个工具和形状标签放到一个数组中
var Edges=document.getElementById('edges');
var actions=[Brush,Pen,Temp1,Eraser,Paint,Straw,Text,Magnifier,Suoxiao,Line,star,Arc,hexagon,];

//获取线宽按钮
var Line_1=document.getElementById('width_1');
var Line_3=document.getElementById('width_3');
var Line_5=document.getElementById('width_5');
var Line_8=document.getElementById('width_8');
//把4中线宽对象放到一个数组中
var widths=[Line_1,Line_3,Line_5,Line_8];
//获取颜色按钮
var ColorRed=document.getElementById('red');
var ColorGreen=document.getElementById('green');
var ColorBlue=document.getElementById('blue');
var ColorYellow=document.getElementById('yellow');
var ColorWhite=document.getElementById('white');
var ColorBlack=document.getElementById('black');
var ColorPink=document.getElementById('pink');
var ColorPurPle=document.getElementById('purple');
var ColorCyan=document.getElementById('cyan');
var ColorOrange=document.getElementById('orange');
var ColorCheck=document.getElementById('colorCheck');
//把10中颜色标签对象放到一个数组中
var colors=[ColorRed,ColorGreen,ColorBlue,ColorYellow,ColorWhite,ColorBlack,ColorPink,ColorPurPle,ColorCyan,ColorOrange];

//设置初始值 
	//默认选中画笔工具
	drawBrush(0);
	//默认设置颜色
	setColor(ColorRed,0);
	//设置默认线宽
	setLineWidth(0);
	canvas.style.cursor="url(images/pen.cur),auto";

var showVal = function(){
	var rg = document.getElementsByName("isFill");
	for(var i=0;i<rg.length;i++){
		if(rg[i].checked){
			//alert(rg[i].value);
			return rg[i].value;
		}
	}
}
//状态设置函数
function setStatus(Arr,num,type){
	for(var i=0;i<Arr.length;i++){
		//设置选中的标签改变CSS属性
		if(i==num){
			//设置改变CSS的样式是背景色还是边框
			if(type==1){
				Arr[i].style.background="#fff3a4";
			}else{
				Arr[i].style.border="1px solid #fff";
			}
		}else{//设置未选中的组中的其他标签改变颜色
			if(type==1){
				//ba ckground:linear-gradient(#FFFFFF,#e9e9e9);
				Arr[i].style.background="linear-gradient(#FFFFFF,#e9e9e9)";
				// Arr[i].style.background="#6a9bcc";
			}else{
				Arr[i].style.border="1px solid #454545";
			}
		}
	}
}
//设置图片功能函数
function saveimg(){
	var imgdata=canvas.toDataURL();
	var b64=imgdata.substring(22);
	//alert(b64)
	//form表单中的隐藏表单，赋值
	var data=document.getElementById('data');
	data.value=b64;
	var from=document.getElementById('myform');
	form.submit();

}

var state=0;
function state(){

}
//清空画布
function  clearimg(){
	cxt.clearRect(0,0,880,400);
}

//列出所有的按钮对应的函数
//铅笔工具函数
function drawBrush(num){
	setStatus(actions,num,1);
	canvas.style.cursor="url(images/pen.cur),auto";
	var flag=0;//设置标志位->检测鼠标是否按下
	canvas.onmousedown=function(evt){
		evt=window.event||evt;
		var startX=evt.pageX-this.offsetLeft;
		var startY=evt.pageY-this.offsetTop;
		cxt.beginPath();
		cxt.moveTo(startX,startY);
		flag=1;
	}

	//鼠标移动的时候->不同的绘图(获取鼠标的位置)
	canvas.onmousemove=function(evt){
		evt=window.event||evt;
		var endX=evt.pageX-this.offsetLeft;
		var endY=evt.pageY-this.offsetTop;
		//判断一下鼠标是否按下
		if(flag){
			//移动的时候设置路径并且画出来
			cxt.lineTo(endX,endY);
			cxt.stroke();
		}

	}

	//鼠标抬起的时候结束绘图
	canvas.onmouseup=function(){
		flag=0;
	}

	//鼠标移出canvas的时候必须取消画图操作
	canvas.onmouseout=function(){
		flag=0;
	}
}
function drawPen(num){
	setStatus(actions,num,1);
	canvas.style.cursor="url(images/paintbrush.cur),auto";
}
function drawtemp1(num)
{
	setStatus(actions,num,1);
}
var eraserFlag=0;//设置橡皮擦的状态标志位
//橡皮工具函数
function drawEraser(num){
	setStatus(actions,num,1);
	canvas.style.cursor="url(images/rubber.cur),auto";
	canvas.onmousedown=function(evt){
		evt=window.event||evt;
		var eraserX=evt.pageX-this.offsetLeft;
		var eraserY=evt.pageY-this.offsetTop;
		//canvas擦出方法 cxt.clearRect();
		cxt.clearRect(eraserX-cxt.lineWidth,eraserY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2);
		eraserFlag=1;
	}
	//随着鼠标移动不停地擦出
	canvas.onmousemove=function(evt){
		evt=window.event||evt;
		var eraserX=evt.pageX-this.offsetLeft;
		var eraserY=evt.pageY-this.offsetTop;
		// 擦除方法
		if(eraserFlag){//判断鼠标左键是否按下(按下的情况下拖动鼠标才能删除)
			cxt.clearRect(eraserX-cxt.lineWidth,eraserY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2);
		}
		
	}
	//抬起鼠标按键 	清除擦出的状态位 变成0
	canvas.onmouseup=function(){
		eraserFlag=0;
	}
	//抬起鼠标移出画布 	清除擦出的状态位 变成0
	canvas.onmouseout=function(){
		eraserFlag=0;
	}
}

//油漆桶工具函数
function drawPaint(num){
	setStatus(actions,num,1);
	canvas.style.cursor="url(images/paintcan.cur),auto";
	canvas.onmousedown=function(){
		//把画布涂成指定的颜色->画一个填充颜色的矩形
		cxt.fillRect(0,0,890,400);
	}
	canvas.onmouseup=null;
	canvas.onmousemove=null;
	canvas.onmouseout=null;
}

//吸管工具函数
function drawStraw(num){
	setStatus(actions,num,1);
	canvas.style.cursor="url(images/pipette.cur),auto";
	canvas.onmousedown=function(evt){
		evt=window.event||evt;
		var strawX=evt.pageX-this.offsetLeft;
		var strawY=evt.pageY-this.offsetTop;
		//获取该点坐标处的颜色信息
		//获取图像信息的方法getImageData(开始点X,开始点Y,宽度,高度)
		var obj=cxt.getImageData(strawX,strawY,1,1);
		//alert(obj.data[0]+","+obj.data[1]+","+obj.data[2]+","+obj.data[3]);//ImageData对象
		//obj.data=[红,绿,蓝色,透明度]//1像素的数据
		//注意:在data数组中，每4个数组元素表示canvas画布中的一个像素点，
		//这4个元素的取值范围都是0-25
		var color='rgb('+obj.data[0]+','+obj.data[1]+','+obj.data[2]+')';
		//将吸管吸出的颜色设定到我们的应用中 
		cxt.strokeStyle=color;
		cxt.fillStyle=color;
		//颜色吸取吸取之后自动选中画笔工具
		drawPen(0);
	}
	//取消移动事件 、鼠标抬起事件、鼠标移出事件
	canvas.onmousemove=null;
	canvas.onmouseup=null;
	canvas.onmouseout=null;
	
}

//文本工具函数
function drawText(num){
	canvas.style.cursor="text";
	setStatus(actions,num,1);
	canvas.onmousedown=function(evt){
		evt=window.event||evt;
		//获取鼠标点击时的位置
		var textX=evt.pageX-this.offsetLeft;
		var textY=evt.pageY-this.offsetTop;

		//获取用户信息
		var userVal=window.prompt('请输入文字','');
		if(userVal!=null){
			cxt.fillText(userVal,textX,textY);
		}

	}
	canvas.onmousemove=null;//注销掉鼠标移动时间
	canvas.onmouseout=null;
	canvas.onmouseup=null;


}

//放大镜工具函数
function drawMagnifier(num){
	canvas.style.cursor="url(images/zoom_in.cur),auto";
	setStatus(actions,num,1);
	canvas.onmouseup=function(evt) {
		//evt = window.event || evt;
		//var scale=0.01;
		//var scaleW = $("canvas").css("width");
		//var scaleY = $("canvas").css("height");
		//scaleW=scaleW*(1+scale);
		//scaleY=scaleY*(1+scale);
		////将数据设置在对应的HTML标签上
		//canvas.style.width=parseInt(scaleW)+'px';
		//canvas.style.height=parseInt(scaleY)+'px';
	}

}

//缩小
function drawSuoxiao(num){
	canvas.style.cursor="url(images/zoom_out.cur),auto";
	setStatus(actions,num,1);
	canvas.onmouseup=function(evt) {
		evt = window.event || evt;
		//var scale=0.01;
		//var scaleW = canvas.offsetHeight;
		//var scaleY = canvas.offsetWidth;
		//scaleW=scaleW*(1-scale);
		//scaleY=scaleY*(1-scale);
		////将数据设置在对应的HTML标签上
		//canvas.style.width=parseInt(scaleW)+'px';
		//canvas.style.height=parseInt(scaleY)+'px';
	}

}
//线形状函数
function drawLine(num){
	setStatus(actions,num,1);
	canvas.style.cursor="crosshair";
	canvas.onmousedown=function(evt){
		evt=window.event||evt;
		
		//计算当前鼠标相对于canvas画布的距离(以canvas的左上角为0，0)
		var startX=evt.pageX-this.offsetLeft;
		var startY=evt.pageY-this.offsetTop;
		//设置直线的开始点
		cxt.beginPath();//尽量写上开始新路径
		cxt.moveTo(startX,startY);
	}
	canvas.onmousemove=null;//注销掉其他工具注册时间
	canvas.onmouseout=null;//
	//鼠标按键抬起的时候
	canvas.onmouseup=function(evt){
		//计算鼠标抬起时鼠标相对于画布的坐标
		var endX=evt.pageX-this.offsetLeft;
		var endY=evt.pageY-this.offsetTop;
		//设置路径吧开始点和结束点连接起来,然后进行绘图
		cxt.lineTo(endX,endY);
		cxt.closePath();
		cxt.stroke();
	}
}
//将变量设置为全局变量
var arcX=0;
var arcY=0;
//圆形形状函数
function drawArc(num){
	setStatus(actions,num,1);
	canvas.style.cursor="crosshair";
	canvas.onmousedown=function(evt){
		evt=window.event||evt;
		//获取圆心的位置
		arcX=evt.pageX-this.offsetLeft;
		arcY=evt.pageY-this.offsetTop;
	}
	
	canvas.onmouseup=function(evt){
		evt=window.event||evt;
		//获取半径(目的)
		//实际获取的是一个坐标
		var endX=evt.pageX-this.offsetLeft;
		var endY=evt.pageY-this.offsetTop;
		//计算C的距离
		var a=endX-arcX;
		var b=endY-arcY;
		//计算半径
		var c=Math.sqrt(a*a+b*b);
		cxt.beginPath();
		cxt.arc(arcX,arcY,c,0,360,false);
		cxt.closePath();
		if(showVal()=="notFill")
		{
			cxt.stroke();
		}else if(showVal()=="isFill"){
			cxt.fill();
		}
	}
	canvas.onmousemove=null;//注销掉鼠标移动时间
	canvas.onmouseout=null;
}


var polyX=0;
var polyY=0;

//多边形
function drawHexagon(num){
	setStatus(actions,num,1);
	canvas.style.cursor="crosshair";
	canvas.onmousedown=function(evt){
		evt=window.event||evt;
		polyX=evt.pageX-this.offsetLeft;
		polyY=evt.pageY-this.offsetTop;
	}
	canvas.onmouseup=function(evt) {
		var indx= Edges.selectedIndex+3;
		evt = window.event || evt;
		//实际获取的是一个坐标
		var endX = evt.pageX - this.offsetLeft;
		var endY = evt.pageY - this.offsetTop;
		//计算C的距离
		var a = endX - polyX;
		var b = endY - polyY;
		//计算半径
		var r = Math.sqrt(a * a + b * b);
		cxt.beginPath();
		for (var i = 0; i < indx; i++) {
			// 计算偏转
			var degree = 360 / indx * (i + 0.5) + 90,
				radian = degree * Math.PI / 180;

			// 增加1/3的canvas大小位移量以免被边缘挡住
			var x = Math.cos(radian) * r +a+polyX;
			var y = Math.sin(radian) * r +b+polyY;
			cxt.lineTo(x, y);
		}
		cxt.closePath();
		if(showVal()=="notFill")
		{
			cxt.stroke();
		}else if(showVal()=="isFill"){
			cxt.fill();
		}
	}
	canvas.onmousemove=null;//注销掉鼠标移动时间
	canvas.onmouseout=null;
}
var starX=0;
var starY=0;
//五角星
function drawStar(num){
	setStatus(actions,num,1);
	canvas.style.cursor="crosshair";
	canvas.onmousedown=function(evt){
		evt=window.event||evt;
		starX=evt.pageX-this.offsetLeft;
		starY=evt.pageY-this.offsetTop;
	}
	canvas.onmouseup=function(evt) {
		evt = window.event || evt;
		//实际获取的是一个坐标
		var endX=evt.pageX-this.offsetLeft;
		var endY=evt.pageY-this.offsetTop;
		//计算C的距离
		var a=endX-starX;
		var b=endY-starY;
		//计算半径
		var r=Math.sqrt(a*a+b*b);
		//alert(r);
		a+=starX;
		b+=starY;

		cxt.beginPath();
		var dit = Math.PI * 4 / 5;
		var sin = Math.sin(0) * r + b;
		var cos = Math.cos(0) * r + a;
		console.log(0+":"+0);
		cxt.moveTo(cos, sin);
		for (var i = 0; i < 5; i++)
		{
			var tempDit = dit * i;
			sin = Math.sin(tempDit) * r + b;
			cos = Math.cos(tempDit) * r + a;
			cxt.lineTo(cos, sin);
			console.log(sin+":"+sin+":"+tempDit);
		}
		cxt.closePath();

		//cxt.strokeStyle = "red";
		//
		if(showVal()=="notFill")
		{
			cxt.stroke();
		}else if(showVal()=="isFill"){
			cxt.fill();
		}

		//cxt.fillStyle = "#DDDDDD";
		//
	}
	canvas.onmousemove=null;//注销掉鼠标移动时间
	canvas.onmouseout=null;
}

//线宽设置函数
function setLineWidth(num){
	setStatus(widths,num,1);
	switch(num){
		case 0:
			cxt.lineWidth=1;
			break;
		case 1:
			cxt.lineWidth=3;
			break;
		case 2:
			cxt.lineWidth=5;
			break;
		case 3:
			cxt.lineWidth=8;
			break;
		default:
			cxt.lineWidth=1;
	}
}

//颜色设置函数
function setColor(obj,num){
	setStatus(colors,num,0);
	//设置画笔颜色和填充颜色
	var color=document.getElementById(obj.id).style.background;
	cxt.strokeStyle=obj.id;
	//alert(color);
	cxt.fillStyle=obj.id;
	//document.getElementById(obj.id).style.backgroundColor='#000';
}

$('#picker').colpick({
	layout:'hex',
	submit:0,
	colorScheme:'dark',
	onChange:function(hsb,hex,rgb,el,bySetColor) {
		$(el).css('border-color','#'+hex);
		if(!bySetColor) $(el).val(hex);

	}

}).keyup(function(){

	$(this).colpickSetColor(this.value);

});